    /**
   * 文字垂直居中
   * @param {string} $height 高度
   */
    @mixin text--middle($height) {
        height: $height;
        line-height: $height;
    }

    /**
   * 块级元素水平居中
   * @param {string} $width 宽度
   */
    @mixin block--center() {
        margin-left: auto;
        margin-right: auto;
    }

    /**
   * 链接块化
   * @param {string} $width 宽度
   * @param {string} $height 高度
   */
    @mixin link--block($width, $height) {
        display: block;
        text-decoration: none;
        width: $width;
        height: $height;
    }

    /**
   * 图片块化
   * @param {string} $width 宽度
   * @param {string} $height 高度
   */
    @mixin img--block($width, $height) {
        display: block;
        width: $width;
        height: $height;
    }

    /**
   * 字体
   * @param {array} $fonts 字体列表
   * @param {number} $index 字体列表索引
   */
    @mixin _font($fonts, $index) {
        $font: nth($fonts, $index);
        $font-size: nth($font, 1);

        font-size: $font-size;

        @if (length($font)==2) {
            font-weight: nth($font, 2);
        }

        [data-dpr="2"] & {
            font-size: $font-size * 2;
        }

        [data-dpr="3"] & {
            font-size: $font-size * 3;
        }
    }

    /**
   * 字体
   * @param {array} $fonts 字体列表
   * @param {number} $index 字体列表索引
   */
    @mixin _font-for-debug($fonts, $index) {
        $font: nth($fonts, $index);
        $font-size: nth($font, 1);

        @if (length($font)==2) {
            font-weight: nth($font, 2);
        }

        font-size: $font-size * 2;
    }

    /**
   * 清除浮动
   */
    @mixin clearfix() {
        &::before,
        &::after {
            content: "";
            display: table;
        }

        &::after {
            clear: both;
        }
    }

    /**
   * margin
   * @param {string} $top 顶部 margin
   * @param {string} $right 右边 margin
   * @param {string} $bottom 底部 margin
   * @param {string} $left 左边 margin
   */
    @mixin margin($top: null, $right: null, $bottom: null, $left: null) {
        @if $top !=null {
            margin-top: $top;
        }

        @if $right !=null {
            margin-right: $right;
        }

        @if $bottom !=null {
            margin-bottom: $bottom;
        }

        @if $left !=null {
            margin-left: $left;
        }
    }

    /**
   * padding
   * @param {string} $top 顶部 padding
   * @param {string} $right 右边 padding
   * @param {string} $bottom 底部 padding
   * @param {string} $left 左边 padding
   */
    @mixin padding($top: null, $right: null, $bottom: null, $left: null) {
        @if $top !=null {
            padding-top: $top;
        }

        @if $right !=null {
            padding-right: $right;
        }

        @if $bottom !=null {
            padding-bottom: $bottom;
        }

        @if $left !=null {
            padding-left: $left;
        }
    }

    /**
   * 文字超出部分用省略号代替
   * @param {number} $lines 文字行数
   */
    @mixin text--overflow($lines: 1) {
        overflow: hidden;

        @if $lines==1 {
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        @else {
            /* stylelint-disable-line */
            display: -webkit-box;
            -webkit-line-clamp: $lines;
            -webkit-box-orient: vertical;
        }
    }

    /**
   * 仅 IE8 可用
   * @param {string} $property 属性
   * @param {string} $value 值
   */
    @mixin only-ie8($property, $value) {
        @if $supports-ie8 {
            #{$property}: $value + \9;
        }
    }

    /**
   * 相对定位
   * @param {string} $top 顶部位置
   * @param {string} $right 右边位置
   * @param {string} $bottom 底部位置
   * @param {string} $left 左边位置
   */
    @mixin position--relative($top: null, $right: null, $bottom: null, $left: null) {
        position: relative;

        @if $top !=null {
            top: $top;
        }

        @if $right !=null {
            right: $right;
        }

        @if $bottom !=null {
            bottom: $bottom;
        }

        @if $left !=null {
            left: $left;
        }
    }

    /**
   * 绝对定位
   * @param {string} $top 顶部位置
   * @param {string} $right 右边位置
   * @param {string} $bottom 底部位置
   * @param {string} $left 左边位置
   */
    @mixin position--absolute($top: null, $right: null, $bottom: null, $left: null) {
        position: absolute;

        @if $top !=null {
            top: $top;
        }

        @if $right !=null {
            right: $right;
        }

        @if $bottom !=null {
            bottom: $bottom;
        }

        @if $left !=null {
            left: $left;
        }
    }

    /**
   * 固定定位
   * @param {string} $top 顶部位置
   * @param {string} $right 右边位置
   * @param {string} $bottom 底部位置
   * @param {string} $left 左边位置
   */
    @mixin position--fixed($top: null, $right: null, $bottom: null, $left: null) {
        position: fixed;

        @if $top !=null {
            top: $top;
        }

        @if $right !=null {
            right: $right;
        }

        @if $bottom !=null {
            bottom: $bottom;
        }

        @if $left !=null {
            left: $left;
        }
    }

    /**
   * 兼容 IE8 的 display: inline-block
   */
    @mixin inline--block() {
        display: inline-block;

        @include only-ie8(display, inline);
        @include only-ie8(zoom, 1);
    }

    /**
   * 设置宽高
   * @param {string} $width 宽
   * @param {string} $height 高
   */
    @mixin size($width, $height) {
        width: $width;
        height: $height;
    }

    /**
   * 圆
   * @param {string} $diameter 直径
   */
    @mixin circle($diameter) {
        width: $diameter;
        height: $diameter;
        border-radius: 50%;
    }

    /**
   * 横线
   * @param $margin-top {string} 顶部间距
   * @param $margin-bottom {string} 底部间距
   * @param $color {string} 横线颜色
   */
    @mixin hr($margin-top: 0, $margin-bottom: 0, $color: #000) {
        height: 1px;
        border: 0;
        border-top: 1px solid $color;
        margin-top: $margin-top;
        margin-bottom: $margin-bottom;
        display: block;
    }

    /**
   * 紧贴顶部
   */
    @mixin header--sticky {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
    }

    /**
   * 紧贴底部
   */
    @mixin footer--sticky {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
    }

    /**
   * 隐藏文字
   */
    @mixin text--hide {
        overflow: hidden;
        text-indent: 101%;
        white-space: nowrap;
    }



    /**
   * flex布局
   
   */
    @mixin flex-center {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }

    @mixin flex-bw {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    @mixin flex-cl {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    @mixin flex-cl-notc{
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: center;
    }